<template>
  <div>
    <div class="container">
      <van-search
        class="search"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @input="onSuggest"
        @search="onSearch"
      >
        <template #left>
          <van-icon class="go-back" name="arrow-left" @click="goBack"/>
        </template>
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 展示搜索建议 -->
    <template v-if="value">
      <van-cell v-for="item in list" :key="item" icon="search" border>
        <template #title>
          <div v-html="getHighlightHTML(item)"></div>
        </template>
      </van-cell>
    </template>
    <!-- 展示搜索记录 -->
    <template v-else>
      <van-cell title="历史记录" class="record" v-if="lastSearchList[0]">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon
            name="close"
            class="search-icon"
            @click="removeAllHistory"
          />
        </template>
      </van-cell>
      <van-cell-group>
        <van-cell v-for="(item, idx) in lastSearchList" :key="item" center>
          {{ item }}
          <template #right-icon>
            <van-icon
              name="close"
              @click.stop="onRemoveLastSearchListItem(idx)"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </template>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import * as tool from "@/utils";
// lodash 用法
// import { debounce } from "lodash";
// const onSuggest = debounce(function(value) {
//   this.updateList(value);
// }, 1000)
// 防抖之后 当作正常函数使用
// 内部的被装饰的函数 只做本来功能 防抖功能交给debounce函数来做
const onSuggest = tool.debounce(function (value) {
  this.updateList(value);
}, 500);
export default {
  data() {
    return {
      value: "",
      // 最近搜索列表
      lastSearchList: JSON.parse(localStorage.getItem("lastSearchList")) || [],
    };
  },
  computed: {
    ...mapState("search", ["list"]),
  },
  methods: {
    ...mapActions("search", ["updateList"]),
    ...mapMutations("search", ["setList"]),
    goBack() {
      this.$router.go(-1);
    },
    onSuggest(value) {
      // 清空之前的搜索建议列表
      this.setList([]);
      // 防抖 + 改this
      onSuggest.call(this, value);
    },
    getHighlightHTML(item) {
      return item.replace(
        this.value,
        `<span class="highlight">${this.value}</span>`
      );
    },
    onSearch() {
      if (!this.value) {
        return;
      }
      this.lastSearchList = tool.unique(this.lastSearchList.concat(this.value));
      // 存储最新数据
      this.saveLastSearchList();
      this.isShow = true;
      // 跳转至搜索结果页面
      this.$router.push({
        name: "search-res",
        query: {
          searchValue: this.value,
        },
      });
      this.value = "";
    },
    // 存储最新数据
    saveLastSearchList() {
      localStorage.setItem(
        "lastSearchList",
        JSON.stringify(this.lastSearchList)
      );
    },
    // 删除最近搜索列表项
    onRemoveLastSearchListItem(idx) {
      this.lastSearchList.splice(idx, 1);
      // 存储最新数据
      this.saveLastSearchList();
      if (!this.lastSearchList[0]) {
        this.removeAllHistory();
      }
    },
    // 删除所有历史记录
    removeAllHistory() {
      localStorage.removeItem("lastSearchList");
      this.lastSearchList = [];
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  box-sizing: border-box;
  .go-back {
    margin-right: 4px;
  }
  .search {
    flex: 1;
    align-items: center;
  }
}
::v-deep .highlight {
  color: red;
}
.record {
  display: flex;
  align-items: center;
}
</style>